<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>AppInfoParser Demo</title>
  <style>
    html,body { padding: 0;margin: 0; font-size: 12px; background: #efefef; }
    p { padding: 0; margin: 0; }
    .container { width: 450px; margin: 20px auto; }
    .title { border-left: 4px solid #78C3F3; padding-left: 12px; font-size: 16px; margin: 0 0 20px 0; }
    .card { padding: 20px; margin-bottom: 20px; background: #fff; border-radius: 4px; font-size: 12px; transition: all .3s; border: 1px solid #d9d9d9; border-color: #e9e9e9; }
    .card:hover { box-shadow: 0 1px 6px hsla(0,0%,39%,.2); border-color: #eee; }
    .file { position: relative; border: 1px solid #99D3F5; border-radius: 2px; width: 85px; height: 30px; line-height: 30px; text-align: center; color: #1E88C7; }
    .file:hover { background: #AADFFD; border-color: #78C3F3; color: #004974; text-decoration: none; }
    #file-input { position: absolute; top: 0; left: 0; width: 85px; height: 30px; opacity: 0; }
    #file-input:hover { cursor: pointer; }
  </style>
</head>

<body>
  <div class="container">
    <div class="card">
      <p class="title">Operation Panel</p>
      <div class="file">Select File
        <input type="file" name="file" id="file-input" onchange="fileSelect()">
      </div>
    </div>
    <div id="result-list">
    </div>
  </div>
  <script src="../dist/app-info-parser.js"></script>
  <script>
    function fileSelect() {
      const files = document.getElementById('file-input').files
      try {
        const parser = new AppInfoParser(files[0])
        parser.parse().then(result => {
          const div = document.createElement('div')
          div.innerHTML = `
            <div style="padding: 20px; margin-bottom: 10px; background: #fff; border-radius: 4px; font-size: 16px; color: #717171; border: 1px solid #d9d9d9; border-color: #e9e9e9;">
              <p style="padding: 10px 0; display: flex; overflow: hidden;">
                <span style="color: #000; text-align: right; width: 100px; font-weight: 600; padding-right: 20px;">File Name: </span>
                <span style="width: 0; flex: 1; overflow-wrap: break-word; word-wrap: break-word;">${ files[0].name }</span>
              </p>
              <p style="padding: 10px 0; display: flex; overflow: hidden;">
                <span style="color: #000; text-align: right; width: 100px; font-weight: 600; padding-right: 20px;">App Icon: </span>
                <img style="width: 80px; height: 80px;" src="${result.icon}" alt="">
              </p>
              <p style="padding: 10px 0; display: flex; overflow: hidden;">
                <span style="color: #000; text-align: right; width: 100px; font-weight: 600; padding-right: 20px;">App Name: </span>
                <span style="width: 0; flex: 1; overflow-wrap: break-word; word-wrap: break-word;">${ result['package'] || result['CFBundleName'] }</span>
              </p>
              <p style="padding: 10px 0; display: flex; overflow: hidden;">
                <span style="color: #000; text-align: right; width: 100px; font-weight: 600; padding-right: 20px;">App Version: </span>
                <span style="width: 0; flex: 1; overflow-wrap: break-word; word-wrap: break-word;">${ result['versionName'] || result['CFBundleShortVersionString'] }</span>
              </p>
            </div>
          `
            document.getElementById('result-list').appendChild(div)
          }).catch(e => {
            window.alert('Parse Error: ' + e)
          })
      } catch (e) {
        window.alert('Parse Error: ' + e)
      }
    }
  </script>
</body>

</html>